<template>
    <div class="draw-tabs">
        <el-tabs v-model="activePage">
            <el-tab-pane label="图元" name="first">
                <el-button
                    class="point"
                    :class="{ current: actionType === 0 }"
                    @click="drawPiont(0)"
                >
                    <div class="dec">点</div>
                </el-button>
                <el-button class="line" :class="{ current: actionType === 1 }" @click="drawLine(1)">
                    <div class="dec">线</div>
                </el-button>
                <el-button
                    class="surface"
                    :class="{ current: actionType === 2 }"
                    @click="drawPolygon(2)"
                >
                    <div class="dec">面</div>
                </el-button>
                <el-button
                    class="circle"
                    :class="{ current: actionType === 3 }"
                    @click="drawCircle(3)"
                >
                    <div class="dec">圆</div>
                </el-button>
                <el-button
                    class="oval"
                    :class="{ current: actionType === 4 }"
                    @click="drawEllipse(4)"
                >
                    <div class="dec">椭圆</div>
                </el-button>
                <el-button
                    class="rectangle"
                    :class="{ current: actionType === 5 }"
                    @click="drawExtent(5)"
                >
                    <div class="dec">矩形</div>
                </el-button>
                <el-button class="word" :class="{ current: actionType === 6 }" @click="drawText(6)">
                    <div class="dec">文字</div>
                </el-button>
            </el-tab-pane>
            <el-tab-pane label="属性" name="second">
                <div class="pointForm" v-if="groundForm">
                    <el-form label-position="right" label-width="80px" :model="groundForm">
                        <el-form-item label="填充">
                            <el-switch
                                v-model="groundForm.fill"
                                active-color="#1B6477"
                                inactive-color="#39424D"
                            ></el-switch>
                        </el-form-item>
                        <el-form-item label="填充色">
                            <el-color-picker
                                v-model="groundForm.color"
                                size="small"
                                show-alpha
                            ></el-color-picker>
                        </el-form-item>
                        <el-form-item label="图片" v-if="groundForm.hasOwnProperty('image')">
                            <el-radio-group v-model="groundForm.image" size="mini">
                                <el-radio-button :label="$refs.img1">
                                    <span class="">
                                        <img
                                            src="./theme/img/draw/circle2.png"
                                            class="pic"
                                            alt=""
                                            ref="img1"
                                        />
                                    </span>
                                </el-radio-button>
                                <el-radio-button :label="$refs.img2">
                                    <span class="">
                                        <img
                                            src="./theme/img/draw/word2.png"
                                            class="pic"
                                            alt=""
                                            ref="img2"
                                        />
                                    </span>
                                </el-radio-button>
                                <el-radio-button :label="$refs.img3">
                                    <span class="">
                                        <img
                                            src="./theme/img/draw/oval2.png"
                                            class="pic"
                                            alt=""
                                            ref="img3"
                                        />
                                    </span>
                                </el-radio-button>
                                <el-radio-button :label="$refs.img4">
                                    <span class="">
                                        <img
                                            src="./theme/img/draw/rectangle2.png"
                                            class="pic"
                                            alt=""
                                            ref="img4"
                                        />
                                    </span>
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="大小" v-if="groundForm.hasOwnProperty('scale')">
                            <el-input-number
                                v-model="groundForm.scale"
                                controls-position="right"
                                size="small"
                                :step="0.1"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="文字内容" v-if="groundForm.hasOwnProperty('text')">
                            <el-input v-model="groundForm.text" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="字号" v-if="groundForm.hasOwnProperty('fontSize')">
                            <el-input-number
                                v-model="groundForm.fontSize"
                                controls-position="right"
                                size="small"
                                :min="12"
                                :step="0.5"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="字体" v-if="groundForm.hasOwnProperty('fontFamily')">
                            <el-radio-group v-model="groundForm.fontFamily" size="mini">
                                <el-radio-button label="黑体">黑体</el-radio-button>
                                <el-radio-button label="宋体">宋体</el-radio-button>
                                <el-radio-button label="楷体">楷体</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="线宽" v-if="groundForm.hasOwnProperty('width')">
                            <el-input-number
                                v-model="groundForm.width"
                                controls-position="right"
                                size="small"
                                :min="1"
                                :step="0.5"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="线型" v-if="groundForm.hasOwnProperty('lineType')">
                            <el-radio-group v-model="groundForm.lineType" size="mini">
                                <el-radio-button label="Color">普通</el-radio-button>
                                <el-radio-button label="PolylineGlow">发光</el-radio-button>
                                <el-radio-button label="PolylineDash">虚线</el-radio-button>
                                <el-radio-button label="PolylineOutline">带外衬色</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            label="边框线"
                            v-if="
                                targetType === 'GroundCircle' ||
                                    targetType === 'GroundRectangle' ||
                                    targetType === 'GroundEllipse' ||
                                    targetType === 'GroundPolygon'
                            "
                        >
                            <el-switch
                                v-model="groundForm.outline"
                                active-color="#1B6477"
                                inactive-color="#39424D"
                            ></el-switch>
                        </el-form-item>
                        <el-form-item label="边框线颜色" v-if="groundForm.outline">
                            <el-color-picker
                                v-model="groundForm.outlineColor"
                                show-alpha
                                size="small"
                            ></el-color-picker>
                        </el-form-item>
                        <el-form-item label="边框线宽度" v-if="groundForm.outline">
                            <el-input-number
                                v-model="groundForm.outlineWidth"
                                controls-position="right"
                                size="small"
                                :min="0"
                                :step="0.5"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item label="外衬色" v-if="targetType === 'Text'">
                            <el-color-picker
                                v-model="groundForm.outlineColor"
                                show-alpha
                                size="small"
                            ></el-color-picker>
                        </el-form-item>
                        <el-form-item
                            label="外衬色"
                            v-else-if="
                                targetType === 'GroundPolyline' &&
                                    groundForm.lineType === 'PolylineOutline'
                            "
                        >
                            <el-color-picker
                                v-model="groundForm.outlineColor"
                                show-alpha
                                size="small"
                            ></el-color-picker>
                        </el-form-item>
                        <el-form-item label="外衬线宽度" v-if="targetType === 'Text'">
                            <el-input-number
                                v-model="groundForm.outlineWidth"
                                controls-position="right"
                                size="small"
                                :min="0"
                                :step="0.5"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="外衬线宽度"
                            v-else-if="
                                targetType === 'GroundPolyline' &&
                                    groundForm.lineType === 'PolylineOutline'
                            "
                        >
                            <el-input-number
                                v-model="groundForm.outlineWidth"
                                controls-position="right"
                                size="small"
                                :min="0"
                                :step="0.5"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="发光强度"
                            v-if="groundForm.lineType === 'PolylineGlow'"
                        >
                            <el-input-number
                                v-model="groundForm.glowPower"
                                controls-position="right"
                                size="small"
                                :min="0"
                                :step="0.01"
                                :max="1"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="单位长度"
                            v-if="groundForm.lineType === 'PolylineDash'"
                        >
                            <el-input-number
                                v-model="groundForm.dashedLength"
                                controls-position="right"
                                size="small"
                                :min="1"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="实线比例"
                            v-if="groundForm.lineType === 'PolylineDash'"
                        >
                            <el-input-number
                                v-model="groundForm.dashedScale"
                                controls-position="right"
                                size="small"
                                :min="0"
                                :max="1"
                                :step="0.1"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="半径"
                            v-if="groundForm.hasOwnProperty('radius')"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.radius"
                                controls-position="right"
                                size="small"
                                :min="0"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="长半轴"
                            v-if="groundForm.hasOwnProperty('semiMajorAxis')"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.semiMajorAxis"
                                controls-position="right"
                                size="small"
                                :min="0"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="短半轴"
                            v-if="groundForm.hasOwnProperty('semiMinorAxis')"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.semiMinorAxis"
                                controls-position="right"
                                size="small"
                                :min="0"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="旋转角度"
                            v-if="
                                targetType === 'GroundEllipse' &&
                                    groundForm.hasOwnProperty('rotation')
                            "
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.rotation"
                                controls-position="right"
                                size="small"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="经度坐标"
                            v-if="targetType === 'Marker' || targetType === 'Text'"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.position.lon"
                                controls-position="right"
                                size="small"
                                :min="-180"
                                :max="180"
                                placeholder="经度"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="维度坐标"
                            v-if="targetType === 'Marker' || targetType === 'Text'"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.position.lat"
                                controls-position="right"
                                size="small"
                                :min="-180"
                                :max="180"
                                placeholder="维度"
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="圆心经度"
                            v-if="targetType === 'GroundCircle' || targetType === 'GroundEllipse'"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.center.lon"
                                controls-position="right"
                                size="small"
                                :min="-180"
                                :max="180"
                                placeholder="经度"
                            >
                                经度
                            </el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="圆心维度"
                            v-if="targetType === 'GroundCircle' || targetType === 'GroundEllipse'"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.center.lat"
                                controls-position="right"
                                size="small"
                                :min="-180"
                                :max="180"
                                placeholder="维度"
                            >
                                维度
                            </el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="矩形范围"
                            v-if="groundForm.hasOwnProperty('extent')"
                            class="lengthen"
                        >
                            <el-input-number
                                v-model="groundForm.extent.west"
                                controls-position="right"
                                size="small"
                                :min="-180"
                                :max="groundForm.extent.east"
                                placeholder="经度"
                            ></el-input-number>
                            <el-input-number
                                v-model="groundForm.extent.south"
                                controls-position="right"
                                size="small"
                                :min="-90"
                                :max="groundForm.extent.north"
                                placeholder="维度"
                            ></el-input-number>
                            <el-input-number
                                v-model="groundForm.extent.east"
                                controls-position="right"
                                size="small"
                                :min="groundForm.extent.west"
                                :max="180"
                                placeholder="经度"
                            ></el-input-number>
                            <el-input-number
                                v-model="groundForm.extent.north"
                                controls-position="right"
                                size="small"
                                :min="groundForm.extent.south"
                                :max="90"
                                placeholder="维度"
                            ></el-input-number>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="tips" v-else style="text-align: center;">
                    请选择图元
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
/* global Cesium viewer */
export default {
    // Marker 点
    // Text   文字
    // GroundPolyline  线
    // GroundCircle   圆
    // GroundRectangle 矩形
    // GroundEllipse   椭圆
    // GroundPolygon   面
    props: [],
    data() {
        return {
            activePage: 'first',
            actionType: null,
            targetType: null,
            groundForm: null,
        };
    },
    methods: {
        drawCallback(primitive, primitives, attribute) {
            if (primitive._scene.id !== viewer.scene.id) {
                new Cesium.C_DrawHelper(viewer.scene).stopDrawing();
                primitive.properties.isRight = true;
            } else if (window.rightViewer) {
                new Cesium.C_DrawHelper(window.rightViewer.scene).stopDrawing();
            }
            this.$emit(
                'addLeafNode',
                {
                    id: primitive.id,
                    label: '标绘',
                    isLeaf: true,
                },
                primitive
            );
            this.actionType = false;
        },

        createOptions() {
            return {
                id: Cesium.createGuid(),
            };
        },
        createCallbacks() {
            return {
                endCallback: this.drawCallback,
                startEditCallback: this.startEditCallback,
                endEditCallback: this.endEditCallback,
            };
        },
        startEditCallback(obj, geometry) {
            this.groundForm = obj;
            this.targetType = geometry.getType();
            this.activePage = 'second';
            console.log(this.groundForm);
        },
        endEditCallback(geometry) {
            this.groundForm = null;
            this.activePage = 'first';
            console.log(this.groundForm);
        },
        getActiveLayer() {
            let id = this.$parent.activeLayer;
            let pId = this.$parent.activeLayerParent;

            if (!id || !pId) {
                this.$message({
                    message: '请设置活跃图层',
                    type: 'warning',
                    offset: 500,
                });
                return false;
            }
            return true;
        },
        drawPiont(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                new Cesium.C_DrawHelper(viewer.scene).startDrawingMarker(options, callbacks);
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingMarker(
                        options,
                        callbacks
                    );
            }
        },
        drawLine(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                options.color = 'rgba(255,0,0,1)';
                new Cesium.C_DrawHelper(viewer.scene).startDrawingPolyline(options, callbacks);
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingPolyline(
                        options,
                        callbacks
                    );
            }
        },
        drawPolygon(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                new Cesium.C_DrawHelper(viewer.scene).startDrawingPolygon(options, callbacks);
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingPolygon(
                        options,
                        callbacks
                    );
            }
        },
        drawCircle(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                new Cesium.C_DrawHelper(viewer.scene).startDrawingCircle(options, callbacks);
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingCircle(
                        options,
                        callbacks
                    );
            }
        },
        drawEllipse(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                new Cesium.C_DrawHelper(viewer.scene).startDrawingEllipse(options, callbacks);
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingEllipse(
                        options,
                        callbacks
                    );
            }
        },
        drawExtent(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                new Cesium.C_DrawHelper(viewer.scene).startDrawingExtent(options, callbacks);
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingExtent(
                        options,
                        callbacks
                    );
            }
        },
        drawText(num) {
            this.actionType = num;
            if (this.getActiveLayer()) {
                let options = this.createOptions();
                let callbacks = this.createCallbacks();
                new Cesium.C_DrawHelper(viewer.scene).startDrawingTextAnnotation(
                    options,
                    callbacks
                );
                window.rightViewer && (options.primitives = window.rightViewer.scene.primitives);
                window.rightViewer &&
                    new Cesium.C_DrawHelper(window.rightViewer.scene).startDrawingTextAnnotation(
                        options,
                        callbacks
                    );
            }
        },
    },
};
</script>

<style lang="scss">
@import './theme/css/markPage.scss';
</style>
